<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
</head>
<body>
<form action="submitMessage" method="post">

    <div class="row cl">
        <div class="formControls col-xs-4 col-sm-4">
            <select name="fang_province" style="width: 100px;" class="province">
                <option value="0">==请选择省==</option>
                @foreach($province as $item)
                    <option value="{{ $item->id }}">{{ $item->name }}</option>
                @endforeach
            </select>
            <select name="fang_city" id="fang_city" style="width: 100px;" class="city">
                <option value="0">==市==</option>
            </select>
            <select name="fang_region" id="fang_region" style="width: 100px;" class="area">
                <option value="0">==区/县==</option>
            </select>
        </div>
    </div>
    <input type="submit" value="提交">
</form>
</body>
</html>
<script type="application/javascript">
    $(function () {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.province').change(function () {
            var province = $(this).val();

            $.ajax({
                //请求方式
                type : "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "getcity",
                //数据，json字符串
                data : {"province":province},
                //请求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var citys = result.data;

                        var optionstr = "";
                        //渲染city选择框
                        for(var i = 0; i < citys.length; i++)
                        {
                            var city = citys[i];

                             optionstr += "<option value='" + city.id + "'>" + city.name + "</option>";
                        }

                        $('.city').html(optionstr);

                    }
                    else
                    {
                        alert(result.message);
                    }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })
    $(function () {
        //当省选项值发生变化的时候，发送ajax请求，获取对应的市区信息，并渲染
        $('.city').change(function () {
            var city = $(this).val();
            console.log(city);
            $.ajax({
                //请求方式
                type : "get",
                //请求的媒体类型
                contentType: "application/json;charset=UTF-8",
                //请求地址
                url : "getarea",
                //数据，json字符串
                data : {"city":city},
                //请求成功
                dataType:"json",
                success : function(result) {
                    //console.log(result)
                    if(result.status == 0)
                    {
                        var areas = result.data;
                        console.log(areas);
                        var optionstr = "";
                        //渲染city选择框
                        for(var i = 0; i < areas.length; i++)
                        {
                            var area = areas[i];

                            optionstr += "<option value='" + area.id + "'>" + area.name + "</option>";
                        }

                        $('.area').html(optionstr);

                    }
                    else
                    {
                        alert(result.message);
                    }

                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        })
    })

</script>


{{--<script>
    function selectCity(obj, selectName) {
        // 得到选中的值
        let value = $(obj).val();
        // 以省份ID得到市 发起ajax请求
        $.get('{{ route('admin.fang.city') }}', {id: value}).then(jsonArr => {
            let html = '<option value="0">==市==</option>';
            // 循环 map  for  for in    for of    $.each
            jsonArr.map(item => {
                var {id, name} = item;
                html += `<option value="${id}">${name}</option>`;
            });
            $('#' + selectName).html(html);
        });
    }
</script>--}}

